iT邦幫忙

2023 iThome 鐵人賽

DAY 23
1
Vue.js

Nuxt.js 3.x 筆記-打造 SSR 專案系列 第 23

D23:Nuxt 3.x 替網站增加 Sitemap 網站地圖

  • 分享至 

  • xImage
  •  

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀

Sitemap 是一種用來提供網站資訊的檔案,記錄網站內的網頁、圖片等,主要功用為協助搜尋引擎快速了解我們的網頁

新網站上線後,雖然搜尋引擎爬蟲會自動讀取網站內容並收錄,不過當網站規模較大、架構較複雜、彼此間連結性較低,可能需要花較長的時間才能完整收錄,透過 Sitemap,直接告訴搜尋引擎網頁資訊,能有效加快網頁收錄的速度。

接下來說明如何在 Nuxt3 專案內加入 Sitemap 網站地圖:

套件安裝

安裝 Nuxt3 整合模組 nuxt-simple-sitemap,本篇搭配版本 v.3.3.2

npm i -D nuxt-simple-sitemap

nuxt.config 配置模組

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    'nuxt-simple-sitemap'
  ]
});

標準網址定義

Canonical URL(標準網址)定義對於 SEO 很重要,用來告訴搜尋引擎標準的網址,解決重複內容網頁問題(ex:www.example.com 以及 example.com

標準網址對 SEO 到底有多重要?這裡推薦一篇 文章

// nuxt.config.js
export default defineNuxtConfig({
  site: {
    url: 'http://example.com'
  }
});

建立 Sitemap

假設專案 pages/ 頁面結構如下

pages/
|—— index.vue
|—— hello.vue
|—— about.vue
|—— user/
  |—— [id].vue
|—— post/
  |—— [id].vue

執行 nuxt dev 編譯後,瀏覽器輸入 http://localhost:3000/sitemap.xml,可以看到靜態路徑自動被加入 Sitemap

點選 /sitemap.xml?cancical,可以看到 URL 調整為前面定義的標準網址

自動加入的靜態頁預設沒有帶上 prioritychangefreq 參數,需在設定檔 defaults 加入

// nuxt.config.js
export default defineNuxtConfig({
  sitemap: {
    defaults: {
      changefreq: 'daily',
      priority: 0.8
    }
  }
});

sitemap configure 相關參數與預設值,請參考 官方文件


Sitemap 加入動態路徑

靜態路徑執行編譯時會自動產生,動態路徑則需要結合後端 API 取得

需先具備 Nuxt3 data fetching 相關觀念,可以參考 D13文章

Step1:新增 _sitemap-urls.js

預設路徑結構如下:

server/
|—— api/
  |—— _sitemap-urls.js

預設路徑為 server/api/_sitemap-urls.js,可以透過 dynamicUrlsApiEndpoint 參數調整路徑

// nuxt.config.js
export default defineNuxtConfig({
  sitemap: {
    dynamicUrlsApiEndpoint: '/_sitemap'
  }
});

Step2:透過 API 取得動態路由

範例:

假設 API 如下

// server/api/users.js
export default defineEventHandler(() => {
  return [ '/user/1', '/user/2' ];
});

server/api/_sitemap-urls.js 發出請求並回傳 URL 內容

Nuxt3 $fetch 方法,可以參考 這篇文章

// server/api/_sitemap-urls.js
export default defineEventHandler(async () => {
  const [
    users,
    posts
  ] = await Promise.all([
    $fetch('/api/users'),
    $fetch('/api/posts')
  ]);
  return [ ...users, ...posts ].map(url => {
    return {
      loc: url,
      lastmod: new Date()
    };
  });
});

執行 nuxt dev 編譯後,可以看到動態路由也被加入 Sitemap


Sitemap 整合 I18n

搭配 Nuxt3 I18n 整合模組 @nuxtjs/i18n 開發,nuxt-simple-sitemap 會自動整合,產出各語系 sitemap 檔

@nuxtjs/i18n 套件安裝參考 這篇文章

範例: 語系分為英文繁中

預設會產出一個 index sitemap(ex:sitemap_index.xml)作為各語系 sitemap 索引

點擊查看英文版 sitemap http://localhost:3000/en-sitemap.xml

如果想合併語系檔,將 sitemaps 設為 false 即可

// nuxt.config.js
export default defineNuxtConfig({
  sitemap: {
    sitemaps: false
  }
});

看到這裡,或許有人會納悶為什麼 sitemap 缺少了重要的 hreflang 語系標籤,其實
hreflang 是存在的,上面看到的只是閱覽用的 XSL 檔,要查看原始的 sitemap.xml,請見下一段說明


調整 Sitemap UI

前面看到的 sitemap 只是方面我們閱覽用的 XSL 檔,搜尋引擎真實讀取到的 sitemap.xml 是沒有 CSS 樣式的檔案

查看原始 Sitemap

如果想確認原始 sitemap.xml,將 xsl 設為 false

// nuxt.config.js
export default defineNuxtConfig({
  sitemap: {
    xsl: false
  }
});

sitemap 如果有 <xhtml:link /> 屬性,像是多國語系搭配 hreflang 標籤,瀏覽器畫面渲染會異常,如下圖所示。這只是瀏覽器渲染問題,並不影響 Sitemap 本身功能,搜尋引擎爬蟲一樣可以正常讀取,詳細說明可以參考 討論串

調整欄位顯示內容

透過 xslColumns 調整欄位

// nuxt.config.js
export default defineNuxtConfig({
  sitemap: {
    xslColumns: [
      { label: 'URL', width: '25%' }, // URL 欄位必填
      { label: 'Last Modified', select: 'sitemap:lastmod', width: '25%' },
      { label: 'Change Frequency', select: 'sitemap:changefreq', width: '25%' },
      { label: 'Priority', select: 'sitemap:priority', width: '12.5%' },
      { label: 'Hreflangs', select: 'count(xhtml:link)', width: '12.5%' }
    ]
  }
});

Hreflangs 屬性,必須要搭配 nuxt-simple-sitemap v3.3.2 以上版本才能使用

來看一下調整後的畫面 /images/emoticon/emoticon07.gif


參考資源:
https://nuxtseo.com/
https://nuxt.com/docs/getting-started/deployment#selective-pre-rendering
https://stackblitz.com/edit/nuxt-starter-umyso3?file=nuxt.config.ts


上一篇
D22:Nuxt 3.x 導入 I18n 實作多國語系
下一篇
D24:Nuxt 3.x 套件應用-VeeValidate v4.x 表單驗證
系列文
Nuxt.js 3.x 筆記-打造 SSR 專案30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言